@import "./config.scss";
@import "../components/1px/index.scss";
@import "../components/iconfont/index.scss";


/**
*   自动隐藏文字为省略号
*   可以通过下面数组配置，目前只写了最多四列
*/
/************************* start ******************************/
$ellipsis: (l1: 1, l2: 2, l3: 3, l4: 4);
@each $header, $value in $ellipsis{
    .aui-ellipsis--#{$value}{
        @if $value == 1{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        } @else{
            display: -webkit-box !important;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal;
            -webkit-line-clamp: $value;
            -webkit-box-orient: vertical;
        }
    }
}
/************************ end *******************************/



/************************ form start*************************************/
//radio
.aui-form-radio{
	@include flexbox;
	height: 30px;
	padding: 5px 0;
	margin-right: 20px;
	input{
		-webkit-appearance: none;
		outline: none;
		width: 20px;
		height: 20px;
		border: 1px solid $lineColor;
		border-radius: 50%;
		display: block;
		position: relative;
		&:checked{
			border: 1px solid $kvColor;
			&:after{
				width: 8px;
				height: 8px;
				content: "";
				position:absolute;
				top: 5px;
				left: 5px;
				border-radius: 50%;
				background-color: $kvColor;
			}
		}
		cursor: pointer;
	}
	label{
		padding: 0 10px;
		display: block;
		line-height: 20px;
		cursor: pointer;
	}
}

// input
.aui-input{
    width: 320px;
    height: 40px;
    border: solid 1px $lineColor;
    display: block;
    -webkit-appearance: none;
    background: none;
    line-height: 38px;
    padding: 0 15px;
    outline: none;
    transition: all 0.5s linnear;
    color: $fontStrongColor;
    &:focus{
       border-color: $kvColor;
    }
    padding-left: 15px;
    padding-right: 40px; 
}



.aui-input-file{
	width: 300px;
	height: 30px;
	line-height: 30px;
	position: relative;
	input[type=file]{
		opacity: 0;
		width: 220px;
		height: 30px;
		display: block;
		position: absolute;
		cursor: pointer;
	}
	label{
		display: block;
		width: 220px;
		height: 30px;
		line-height: 30px;
		cursor: pointer;
	}
	.delete{
		background-color: #E64340;
		line-height: 30px;
		height: 30px;
		position: absolute;
		right: 0;
		top: 0;
		padding: 0 10px;
		font-size: 14px;
		&:hover{
			background-color: #E64340 - 30	;
		}
	}
}
/************************* form end***********************************/